<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%-- 该页面作为 userLayout.jsp 的内容区子页面 --%>
<style>
    .space-header {
        margin-bottom: 30px;
    }
    
    .space-title {
        font-size: 28px;
        font-weight: 600;
        color: #1a1a1a;
        margin-bottom: 8px;
    }
    
    .space-subtitle {
        color: #666;
        font-size: 16px;
    }
    
    .action-buttons {
        display: flex;
        gap: 12px;
        margin-bottom: 30px;
        flex-wrap: wrap;
    }
    
    .btn {
        padding: 10px 20px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    
    .btn-primary {
        background: #1a1a1a;
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .btn-primary:hover {
        background: #333;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .btn-secondary {
        background: white;
        color: #1a1a1a;
        border: 2px solid #e5e5e5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .btn-secondary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        border-color: #333;
    }
    
    .space-table {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
    }
    
    .space-table thead {
        background: #f8f8f8;
    }
    
    .space-table th {
        padding: 16px 12px;
        text-align: left;
        font-weight: 600;
        color: #1a1a1a;
        border-bottom: 2px solid #e5e5e5;
        font-size: 14px;
    }
    
    .space-table td {
        padding: 16px 12px;
        border-bottom: 1px solid #f0f0f0;
        color: #1a1a1a;
        font-size: 14px;
    }
    
    .space-table tbody tr {
        transition: all 0.3s ease;
    }
    
    .space-table tbody tr:hover {
        background: #f8f8f8;
        transform: scale(1.01);
    }
    
    .space-name {
        font-weight: 600;
        color: #1a1a1a;
    }
    
    .space-description {
        color: #666;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .visibility-badge {
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }
    
    .visibility-public {
        background: #e8f5e8;
        color: #2e7d32;
    }
    
    .visibility-private {
        background: #ffebee;
        color: #c62828;
    }
    
    .action-links {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: flex-start;
    }
    
    .action-link {
        color: #1a1a1a;
        text-decoration: none;
        font-weight: 500;
        font-size: 13px;
        transition: all 0.3s ease;
    }
    
    .action-link:hover {
        color: #333;
        text-decoration: underline;
    }
    
    .action-link.danger {
        color: #d32f2f;
    }
    
    .action-link.danger:hover {
        color: #b71c1c;
    }
    
    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #666;
    }
    
    .empty-state-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }
    
    .empty-state-text {
        font-size: 16px;
        margin-bottom: 8px;
    }
    
    .empty-state-subtext {
        font-size: 14px;
        opacity: 0.7;
    }
    .action-btn {
        padding: 6px 16px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        transition: all 0.2s;
        margin: 0 2px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        background: #f5f5f5;
        color: #222;
        text-decoration: none;
        box-shadow: 0 1px 4px #0001;
    }
    .action-btn:hover {
        background: #e0e0e0;
        color: #111;
        box-shadow: 0 2px 8px #0002;
        transform: translateY(-1px);
    }
    .action-btn.primary {
        background: #1a1a1a;
        color: #fff;
    }
    .action-btn.primary:hover {
        background: #333;
    }
    .action-btn.danger {
        background: #d32f2f;
        color: #fff;
    }
    .action-btn.danger:hover {
        background: #b71c1c;
    }
</style>

<div class="space-header">
    <div class="space-title">空间列表</div>
    <div class="space-subtitle">管理您的知识空间</div>
</div>

<div class="action-buttons">
    <a href="/user/space" class="btn btn-primary">
        <span>🏠</span>
        返回主页
    </a>
    <a href="/space/public" class="btn btn-secondary">
        <span>🌐</span>
        公开空间
    </a>
    <a href="/space/owned" class="btn btn-secondary">
        <span>👑</span>
        我创建的空间
    </a>
    <a href="/space/joined" class="btn btn-secondary">
        <span>👥</span>
        我加入的空间
    </a>
    <a href="/space/create" class="btn btn-primary">
        <span>➕</span>
        创建空间
    </a>
</div>

<table class="space-table" style="width:100%;">
    <thead>
        <tr>
            <th>名称</th>
            <th>描述</th>
            <th>可见性</th>
            <th>所有者</th>
            <th>成员数</th>
            <th>文档数</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <c:forEach var="space" items="${spaces}">
            <tr>
                <td class="space-name">${space.name}</td>
                <td class="space-description">${space.description}</td>
                <td>
                    <span class="visibility-badge ${space.visibility == 'public' ? 'visibility-public' : 'visibility-private'}">
                        ${space.visibility == 'public' ? '公开' : '私有'}
                    </span>
                </td>
                <td>${space.ownerName}</td>
                <td>${space.memberCount}</td>
                <td>${space.documentCount}</td>
                <td style="text-align:center;">
                    <div class="action-links">
                        <a href="/space/detail/${space.id}" class="action-btn primary">详情</a>
                        <c:if test="${type eq 'owned'}">
                            <a href="/space/edit/${space.id}" class="action-btn">编辑</a>
                            <form action="/space/delete/${space.id}" method="post" style="display:inline; margin:0;">
                                <button type="submit" class="action-btn danger" onclick="return confirm('确定删除该空间？')">删除</button>
                            </form>
                        </c:if>
                    </div>
                </td>
            </tr>
        </c:forEach>
    </tbody>
</table>

<c:if test="${empty spaces}">
    <div class="empty-state">
        <div class="empty-state-icon">📁</div>
        <div class="empty-state-text">暂无空间</div>
        <div class="empty-state-subtext">创建您的第一个知识空间，开始组织和管理您的文档</div>
    </div>
</c:if> 